<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        img{
            padding-left: 0;
            display: block;
        }
        a{
            padding-left: 0;
        }

    </style>
</head>
<body>
<div data-role="page" id="pageone" >
    <div data-role="main" class="ui-content" style="margin:0;padding:0">
        <ul data-role="listview" data-inset="true" id="bookList" style="margin:0">

        </ul>
    </div>
</div>
<script>
    var oLength = 0
    $(document).on("pagebeforecreate",function(){
        alert("启动了");
        var url = '/hibook/getMarkJson.do';
        oLength = load(url)

    })
    function reload(url){
        $.get(url, function(data) {
            alert(data)
            if (oLength < data.length){
                for (i = 0; i < data.length; i++) {
                    var mark = data[i]
                    var markli = $('<li></li>')
                    var marka = $('<a></a>')
                    var l1 = $('<label></label>')
                    var markimg = $('<img />')
                    var l2 = $('<label></label>')
                    var l3 = $('<label></label>')

                    markimg.attr("src", mark.mImageUrl);
                    markimg.attr("style","padding-left:0;display:block")
                    markli.attr("class", "ui-li-has-thumb ui-first-child")
                    marka.attr("class", "ui-btn ui-btn-icon-right ui-icon-carat-r")
                    marka.attr("style", "padding:0;")
                    marka.attr("data-icon", "false")
                    marka.attr("href","http://172.16.100.74:8080/hibook/getMarkDetail/"+i+".do")


                    l1.html(mark.mTitle)
                    l1.attr("style","background-color:rgba(57,117,157,1);margin-bottom:0;display: block;height: 35px;text-align: center;font-size: 18px;font-weight:550;color: #ffffff;line-height: 35px;")

                    l2.html(mark.mType)
                    l2.attr("style","display: inline-block;margin-top: 15px;margin-bottom: 0;float: left;font-size: 16px;vertical-align: bottom;")

                    l3.html(mark.mCount)
                    l3.attr("style","display: inline-block;width:40px;margin-top: 15px;margin-bottom: 0;float: right;text-align: left;font-size: 14px;vertical-align: bottom;")



                    marka.append(l1)
                    marka.append(markimg)
                    marka.append(l2)
                    marka.append(l3)

                    markli.append(marka)

                    $('#bookList').append(markli)


                }
            responesToPhone("true")

            oLength =  data.length
        }else
        {
            responesToPhone("true")
        }

        })
    }
    function load(url) {
        $.get(url, function(data) {
            alert(data)

            for(i=0;i<data.length;i++){
                var mark = data[i]
                var markli = $('<li></li>')
                var marka = $('<a></a>')
                var l1 = $('<label></label>')
                var markimg = $('<img />')
                var l2 = $('<label></label>')
                var l3 = $('<label></label>')

                markimg.attr("src", mark.mImageUrl);
                markimg.attr("style","padding-left:0;display:block")
                markli.attr("class", "ui-li-has-thumb ui-first-child")
                marka.attr("class", "ui-btn ui-btn-icon-right ui-icon-carat-r")
                marka.attr("style", "padding:0;")
                marka.attr("href","http://172.16.100.74:8080/hibook/getMarkDetail/"+i+".do")

                l2.attr("style", "display: inline-block;margin-top: 10px;margin-bottom: 3px;float: left;")
                l3.attr("style", "display: inline-block;margin-top: 10px;margin-bottom: 3px;float: right;")


                l1.html(mark.mTitle)
                l1.attr("style","background-color:rgba(57,117,157,1);margin-bottom:0;display: block;height: 35px;text-align: center;font-size: 18px;font-weight:550;color: #ffffff;line-height: 35px;")

                l2.html(mark.mType)
                l2.attr("style","display: inline-block;margin-top: 15px;margin-bottom: 0;float: left;font-size: 16px;vertical-align: bottom;")

                l3.html(mark.mCount)
                l3.attr("style","display: inline-block;margin-top: 15px;margin-bottom: 0;float: right;width: 80px;text-align: left;font-size: 14px;vertical-align: bottom;")


                marka.append(l1)
                marka.append(markimg)
                marka.append(l2)
                marka.append(l3)

                markli.append(marka)

                $('#bookList').append(markli)


            }
            responesToPhone("true")
            return data.length

        })
    }
    function responesToPhone(isSuccess){
        alert("运行了")
        window.webkit.messageHandlers.responesToPhone.postMessage(isSuccess);
    }
</script>

</body>
</html>
